<template>
<!-- 头部导航栏 -->
  <HomeHeaderVue :today="today"> </HomeHeaderVue>
<!-- 轮播图 -->
  <!-- <BannerVue :banner="banner"></BannerVue> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(item, index) in banner" :key="index">
      <router-link :to="`/detail/${item.id}`">
        <img class="bannerPicture" :src="item.image" />
        <div class="inner">
          <p class="title">{{ item.title }}</p>
          <p class="hint">{{ item.hint }}</p>
        </div>
      </router-link>
    </van-swipe-item>
  </van-swipe>
<!-- 新闻列表 -->
    <van-skeleton title :row="3"  v-if="list.length == 0"/>
    <template v-else>
      <!-- list是存储N天的数据 有多少条数据，循环出多少哥seaction -->
      <!-- item表示每一天的数据 -->
      <section class="news-box" v-for="(item,index) in list" :key="item.date">
        <van-divider content-position="left" v-if="index !== 0">
          {{formatTime(item.date,"{1}月{2}日")}}
        </van-divider>
        <div class="content">
          <NewsListVue :data="itemNews" v-for="(itemNews) in item.stories" :key="itemNews.id"></NewsListVue>
        </div>
      </section>
    </template>
    <!-- 监听下面的div是否出现在视口 -->
    <!-- 如果下面的div出现在视口，就需要发ajax请求获取下一页数据 -->
    <div ref="loadBox" class="lazy-more" v-show="list.length >0">
      <van-loading size="12px">精彩数据准备中...</van-loading>
    </div>
</template>

<script>
import HomeHeaderVue from "@/components/HomeHeader.vue";
// import BannerVue from "@/components/Banner.vue";
import NewsListVue from "../components/NewsList";
import {formatTime} from '@/assets/utils'
import api from "../api/index";
import {
  onBeforeMount,
  reactive,
  toRefs,
  ref,
  watch,
  onMounted,
  onBeforeUnmount
} from "@vue/runtime-core";
export default {
  name:"Home",
  components: {
    HomeHeaderVue,
    NewsListVue
  },
  setup() {
    let state = reactive({
      today: "",
      banner: [],
      list: [],
    });
    onBeforeMount(async () => {
      try {
        let { date, stories, top_stories } = await api.queryNewsLatest();
        state.today = date;
        state.banner = top_stories;
        state.list.push({
          date,
          stories,
        });
      } catch (arr) {
        console.log(arr);
      }
    });
    
    // 通过loadBox就可以得到loadDOM元素
    let loadBox = ref(null)
      // watch(loadBox,(newValue)=>{
      //   console.log(newValue);
      // },{ immediate:true })
    let ob = null //Observer观察者
    onMounted(()=>{
        // API IntersectionObserver 创建一个观察者
      ob = new IntersectionObserver( async (changes)=>{
        let item = changes[0]
        if(item.isIntersecting){
          // Loading DOM元素冒尖了
          // 传今天的日期获取昨天的数据
          // console.log('hhhhhh');
          let {date,stories} = await api.queryNewsBefore(state.list[state.list.length-1]["date"])
          state.list.push({
            date,
            stories
          })
        }
      })
      ob.observe(loadBox.value)
    })

    // 当组件将要卸载时
    onBeforeUnmount(()=>{
      ob.unobserve(loadBox.value)//取消观察
      ob = null
    })
    
    return {
      ...toRefs(state),
      formatTime,
      loadBox
    };
  },
};
</script>


<style lang="less" scoped>

.news-box {
  padding: 0 15px;

  .van-divider {
    margin: 5px 0;
    font-size: 12px;

    &:before {
      display: none;
    }
  }
}

.van-skeleton {
  padding: 30px 15px;
}

.lazy-more {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  height: 50px;
  background: #f4f4f4;
}
.my-swipe .van-swipe-item {
  font-size: 20px;
  //   line-height: 150px;
  //   text-align: center;
  background-color: #39a9ed;
  height: 300px;
  position: relative;
}
.bannerPicture {
  width: 100%;
  height: 100%;
}
.inner {
  position: absolute;
  bottom: 20px;
  left: 10px;
  .title {
    line-height: 25px;
    color: #fff;
  }
  .hint {
    margin-top: 10px;
    font-size: 12px;
    color: #eee;
  }
}
</style>